<template>
  <div class="releaseysShop nav">
    <van-nav-bar title="发布失物招领" left-arrow @click-left="$router.history.go(-1)">
      <span slot="right" class="releaseBtn" @click="releaseBtn">发布</span>
      <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
    </van-nav-bar>
    <div class="reason">
      <textarea placeholder="失物招领信息（120字内）" v-model="info.content"></textarea>
    </div>
    <div class="b_line ml-30 mr-30"></div>
    <div class="flex ml-30 mr-30 forms mt-40">
      <div class="name">物品</div>
      <input type="text" v-model="info.name" placeholder="物品名称" />
    </div>
    <div class="flex ml-30 mr-30 forms mt-40">
      <div class="name">时间</div>
      <input type="text" v-model="info.time" placeholder="捡到失物的时间" readonly="readonly" @click='timeShow=true'/>
    </div>
    <div class="flex ml-30 mr-30 forms mt-40">
      <div class="name">地点</div>
      <input type="text" v-model="info.address" placeholder="捡到失物的地点" />
    </div>
    <div class="flex ml-30 mr-30 forms mt-40 mb-40">
      <div class="name">联系</div>
      <input type="text" v-model="info.tel" placeholder="联系我的方式"  />
    </div>
    <div class="pic ml-30 addPic flex flex-wrap">
      <img v-for="(item,index) in info.images" :key="index" :src="item" />
      <td-upload @upload-img="headPortrait"></td-upload>
    </div>


    <van-actionsheet v-model="timeShow" title="标题">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :max-date="maxDate"
        @confirm='timeChoose'
      />
    </van-actionsheet>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        images: []
      },
      maxDate: new Date(),
      currentDate: new Date(),
      timeShow:false,
    };
  },
  methods: {
    headPortrait(e) {
      this.info.images.push(e);
    },
    releaseBtn() {
      if (!this.info.content) {
        this.$toast.fail("请先输入失物招领信息");
        return;
      }
      if (!this.info.name) {
        this.$toast.fail("请先输入物品名称");
        return;
      }
      if (!this.info.time) {
        this.$toast.fail("请先输入时间");
        return;
      }
      if (!this.info.address) {
        this.$toast.fail("请先输入地点");
        return;
      }
      if (!this.info.tel) {
        this.$toast.fail("请先输入联系方式");
        return;
      }
      let parm = {
        images:JSON.stringify(this.info.images),
        postCategoryId: 2,
        content: JSON.stringify(this.info)
      };

      console.log(this.info);
      this.$post(this.$api.blog.postsPublish, parm).then(data => {
        this.$toast.success("发布成功");
        this.$router.push({ path: "/home", query: { active: 2 } });
      });
    },
    timeChoose(e){
      console.log(e);
      let data = Date.parse(new Date(e));
      this.info.time =this.Convert(data);
      this.timeShow=false;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.forms .name {
  width: 1rem;
  height: 0.6rem;
  border-radius: 0.29rem;
  font: 0.28rem/0.6rem "微软雅黑";
  text-align: center;
  background-color: #f5f5f5;
  margin-right: 0.3rem;
}
.forms input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  color: #cccccc;
  font: 0.3rem/0.6rem "微软雅黑";
}
textarea {
  font: 0.3rem/0.4rem "微软雅黑";
  color: #cccccc;
  border: none;
  outline: none;
  width: 100%;
  height: 2rem;
  margin-left: 0.2rem;
}
.reason {
  position: relative;
  padding: 0.3rem;
}
.reason:before {
  content: "";
  width: 0.04rem;
  height: 0.4rem;
  background-color: #4aace9;
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
}
.addPic {
  /* height: 1.8rem; */
}
.addPic img {
   width: calc((100vw - 0.6rem - 0.2rem)/3);
  height: calc((100vw - 0.6rem - 0.2rem)/3);
  display: inline-block;
  /* margin-right: 0.2rem; */
  margin-right: 0.1rem;
  margin-bottom: 0.1rem;
}
.addPic img:nth-of-type(3n){
  margin-right: 0;
}
</style>
